<template>
  <div class="main-wrapper">
    <div class="detail-header">
      <p class="title">作业详情</p>
      <el-descriptions class="margin-top" :column="4" border>
        <el-descriptions-item v-for="(item,index) in sessionInfoArr" :key="index">
          <template slot="label">
            {{ item.name }}
          </template>
          {{ item.value }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            动力学
          </template>
          {{ formateControllerLable(sessionInfo.sim_type) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            执行进度
            <el-tooltip effect="dark" content="等待中/测试中/已完成" placement="top">
              <i class="iconfont icon-infofill"></i>
            </el-tooltip>

          </template>
          {{ sessionInfo.pend_task_num }} / {{ sessionInfo.run_task_num }} / {{ sessionInfo.finish_task_num }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="detail-body">
      <p class="title">任务列表</p>
      <!-- 搜索栏 -->
      <div class="search-wrap task-detail-search-wrap">
        <div class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="filters" size="small">
            <el-form-item>
              <el-input v-model.lazy="filters.task_id" clearable placeholder="请输入任务ID">
              </el-input>
            </el-form-item>
            <!-- amap跑法的没有评测结果，不可搜索，故不显示 -->
            <el-form-item v-if="run_mode !== 'amap' && run_mode !== 'amap_traffic'">
              <el-select clearable v-model.lazy="filters.metric_pass" placeholder="请选择评测结果">
                <el-option label="已通过" :value="1"></el-option>
                <el-option label="未通过" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="handleSearch">查询
              </el-button>
              <el-button size="small" @click="handleReset">重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="operaution-btn-group">
          <TaskButtonGroup fromPage="taskDetail" @openDeleteDialog="openDeleteDialog" />
        </div>
      </div>
      <!-- 表格 -->
      <div class="task-list">
        <!-- 运行方式为amap、amap_traffic的，加载 amapTable组件，否则加载log2worldTable组件 -->
        <amapTable v-if="run_mode === 'amap' || run_mode === 'amap_traffic'" :isFinish="isFinish" :filters="filters" :session_id="session_id"
          :toSearch="toSearch" @resetToSearchFlag="resetToSearchFlag"></amapTable>
        <log2worldTable v-else :isFinish="isFinish" :filters="filters" :session_id="session_id" :toSearch="toSearch"
          @resetToSearchFlag="resetToSearchFlag"></log2worldTable>
      </div>
      <!--弹窗-->
      <DeleteDialog :visible="isVisibleDeleteModal" :content="deleteContentText" @closeDialog="closeDeleteDialog"
        @submitDelete="submitDelete" />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { allControllerOptions } from '@/business/const'
import { fetchSessionOverview, deleteTask } from '@/api/task'
import log2worldTable from "./components/log2worldTable.vue"
import amapTable from "./components/amapTable.vue"
import TaskButtonGroup from '../components/TaskButtonGroup.vue'
import DeleteDialog from '@/components/DeleteDialog'
export default {
  name: 'TaskDetail',
  components: { log2worldTable, amapTable, TaskButtonGroup, DeleteDialog },
  data() {
    return {
      session_id: '',
      sessionInfoArr: [
        {
          name: '作业名称',
          propName: 'session_name',
          value: ''
        },
        {
          name: '作业ID',
          propName: 'session_id',
          value: ''
        },
        {
          name: '创建时间',
          propName: 'create_time',
          value: ''
        },
        {
          name: '算法版本',
          propName: 'pnc_version',
          value: ''
        },
        {
          name: '运行方式',
          propName: 'run_mode',
          value: ''
        }
      ],  // 概览信息数组
      sessionInfo: {}, 
      isFinish: false,  // 测试中、已完成
      filters: {      // 查询
        task_id: '',
        metric_pass: ''  // 目前使用的是pass字段，待接入metric_result 的字段后 替换该字段，来展示 通过/未通过
      },
      run_mode: '',     // 运行方式
      toSearch: false,  // 通知子组件去执行搜索
      isVisibleDeleteModal: false,
      deleteContentText: '确认删除该任务吗？',
    }
  },
  computed: {
    ...mapState({
      taskDetailFresh: state => state.taskDetail.taskDetailFresh,
      selectedTaskArr: state => state.taskDetail.selectedTaskArr,
    })
  },
  watch: {
    // 监听刷新的flag,执行刷新，2个接口重新获取
    taskDetailFresh(newVal) {
      if (newVal) {
        // 概览接口刷新查询
        this.getSessionOverview()
        // 表格接口刷新查询
        this.toSearch = true
        setTimeout(() => {
          this.$store.dispatch('taskDetail/setTaskDetailFresh', false)
        }, 200)
      }
    }
  },
  created() {
    this.session_id = this.$route.params.sessionId
    // vue router 传参获取到的值，字符串是string, 需要使用 JSON.parse()转换为布尔值
    this.isFinish = JSON.parse(this.$route.params.isFinish)
    this.getSessionOverview()

  },
  methods: {
    // 获取session概览
    getSessionOverview() {
      fetchSessionOverview({ session_id: this.session_id }).then((res) => {
        if (res) {
          this.sessionInfoArr.map((item) => {
            item.value =  res[item.propName]
          })
          this.sessionInfo = res
          this.run_mode = this.sessionInfo.run_mode
        }
      })
    },
    formateControllerLable(value) {
      let findObj = allControllerOptions.find(obj => obj.value === value)
      if (findObj) {
        return findObj.label
      } else {
        return null
      }
    },
    // 点击查询按钮，通知子组件去查询
    handleSearch() {
      this.toSearch = true
    },
    // 点击重置按钮，通知子组件去查询
    handleReset() {
      this.filters = {
        task_id: '',
        metric_pass: null
      }
      this.toSearch = true
    },
    // 将查询标识 置回初始状态
    resetToSearchFlag() {
      this.toSearch = false
    },
    // 打开删除弹窗
    openDeleteDialog() {
      this.isVisibleDeleteModal = true
    },
    // 关闭删除弹窗
    closeDeleteDialog() {
      this.isVisibleDeleteModal = false
    },
    // 确认删除，执行删除接口
    submitDelete() {
      let params = { 'id': this.selectedTaskArr }
      deleteTask(params).then((res) => {
        this.$message({
          message: '删除任务成功',
          type: 'success'
        })
        this.isVisibleDeleteModal = false
        this.toSearch = true
      })
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/vars.scss'; // 定义变量

.title {
  color: $primary-color;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.detail-header {
  padding: 20px 20px 10px;

  .margin-top {
    margin-top: 10px;
  }

}

.detail-body {
  padding: 20px;
}
.search-wrap.task-detail-search-wrap{
  height: 50px;
  .toolbar{
    float: left;
    margin-left: -20px;
  }
  .operaution-btn-group{
    padding-right: 0;
  }
}
</style>